上回簡單介紹了如何使用 CSS 和 javascript 來增加網站的樣式及互動性，今天就來套用在超陽春 Blog 上，來替 新增文章頁 增加一些樣式。

Rails 的慣例是 CSS 可以放在 app/assets/stylesheets 這個資料夾底下，其中 application.css 可以放針對網站每個頁面都想要生效的 CSS 內容。例如我們可以加上

body {
    background-color: blanchedalmond;
}

來修改網頁的背景顏色為杏仁黃。另外顏色也可以用 RGB 三原色的大小來表示，用總共 6 個十六進位的數字來表示 RGB 三原色的比例，例如 #ffffff 表示白色、 #000000 表示黑、 #aaaaaa 為淡灰色。

再來我們幫 new.html.erb 加上一些 HTML，方便我們使用 CSS 時指定想要修改樣式的位置。

<header>
  New Blog Post
</header>

<div class="content">
  <%= form_for :article, url: articles_path do |f| %>
    <p class="title-field">
      <%= f.label :title %>
      <%= f.text_field :title %>
    </p>
  
    <p class="content-field">
      <%= f.label :content %>
      <%= f.text_area :content %>
    </p>
  
    <p class="button">
      <%= f.submit %>
    </p>
  <% end %>
</div>

例如我們幫標題加上 header 標籤，再把表單外面包一層 class 為 content 的 div 標籤，並幫表單標題 Title 和 Content 分別加上不同的 class。

在 application.css 我們再加上一些 CSS 來修改標題字的大小和標題、內容的排版。

header {
    font-size: 48px;
    font-weight: 600;
    padding: 24px;
}

.content {
    max-width: 970px;
    padding: 12px;
    margin: auto;
}

接下來我們可以在 stylesheet 的資料夾中新增 articles.css 檔案來放專屬 article 相關頁面的 CSS 來調整一下字體大小、輸入框大小、輸入標題的位置。

label {
    font-size: 36px;
    font-weight: 600;
    margin: auto;
}

.content-field label {
    vertical-align: top;
}

.content-field textarea {
    vertical-align: top;
    height: 240px;
}

最後結果長這樣，雖然還是有點醜，但應該能稍微體會一下 CSS 的功能了吧